<template>
  <div>
    <n-modal v-model:show="show">
      <div class="flex justify-center">
        <vue3videoPlay
            width="800px"
            title="冰河世纪"
            v-bind="options"
            :autoPlay="false"
        />
      </div>
    </n-modal>
  </div>

</template>
<script setup lang="ts">
import {reactive, ref} from 'vue';
import vue3videoPlay from "vue3-video-play";
import "vue3-video-play/dist/style.css";
import {useUserStore} from "@/store/user";
import {storeToRefs} from "pinia";

const userStore = useUserStore()
const {token} = storeToRefs(userStore)
const options = reactive({
  src: "/cloudDiskAPI/upload/cloud-disk/files/2023-11-17/28641f4a-2969-4563-abe5-f579f99784ba.mp4?Authorization=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJjbG91ZC1kaXNrLXpXZXNsZXkiLCJpYXQiOjE3MDAyMjIzNTYsImV4cCI6MTcwMDI2NTU1NiwidXNlciI6IntcImF2YXRhclwiOlwiYmxvZy91cGxvYWQvYmxvZy9pbWFnZXMvMjAyMy0wNS0wOS96YmNlNGhpOGY1LmpwZ1wiLFwiY3JlYXRlZEF0XCI6XCIyMDIzLTExLTE0IDAxOjMxOjE2XCIsXCJpZFwiOjEsXCJwZXJtaXNzaW9uXCI6XCJjdWRyaVwiLFwicm9sZVwiOlwi566h55CG5ZGYXCIsXCJ1c2VybmFtZVwiOlwiYWRtaW5cIn0iLCJpZCI6MSwidXNlcm5hbWUiOiJhZG1pbiIsImVtYWlsIjpudWxsLCJyb2xlIjoi566h55CG5ZGYIiwiYXZhdGFyIjoiYmxvZy91cGxvYWQvYmxvZy9pbWFnZXMvMjAyMy0wNS0wOS96YmNlNGhpOGY1LmpwZyJ9.yFGvz8ZwT2SyMZD9Ae7YrXx0V4w4AKHIABO-vhPWqkc", //视频源
  type: 'video/mp4', //视频类型
})

const show = ref(false)

const doShow = (path: any) => {
  show.value = true
  options.src = path+'?Authorization='+token.value
}

defineExpose({
  doShow
})
</script>

<style scoped>
</style>

